﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link href="WebStyle/style.css" rel="stylesheet" type="text/css" />
<head>
    <title>Test Page</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #wrapper
        {
           float: left;
            width: 250px;
            height: 190px;
            background-color: #878062;
            text-align: left;
        }
        .on
        {
            color: #d54e21;
            background: #eaf3fa url(arrow.png) no-repeat 3px 10px;
        }
        .active
        {
            background: url(arrow.png) no-repeat 3px 10px;
        }
        p
        {
            margin: 10px 0px;
            padding: 5px;
            color: #363636;
        }
        h1
        {
            font: 17px helvetica;
            color: #1C6280;
            padding: 5px 0px 5px 18px;
            border-top: 1px solid #dfdfdf;
            cursor: pointer;
           
        }
        .name_store
        {
            font-weight: bold;
            width: 225px;
        }
        .category_items1
        {
            float: left;
            width: 250px;
            height: 190px;
            background-color: #878062;
            text-align: left;
        }
        .category_items1 ul
        {
            list-style: none;
            margin: 0px;
            padding-left: 25px;
            width: 225px;
        }
        .category_items1 ul li
        {
            float: left;
            text-align: left;
            width: 110px;
            padding: 5px 0px 0px 10px;
        }
        .category_items1 ul li a
        {
            float: left;
            color: #FFF;
            text-decoration: none;
            font-size: 12px;
            line-height: 25px;
            _line-height: 20px;
            _vertical-align: bottom;
            width: 210px;
            border-bottom: solid 1px #CCC;
        }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('p:not(:first)').hide();
            $('h1:first').addClass('active');
            $('h1').click(function() {
                $('.active').removeClass('active');
                $('p').slideUp('normal');
                if($(this).next('p').is(':hidden') == true) {
                $(this).addClass('active');
                $(this).next('p').slideDown('normal');
                }
            });
            $('h1').hover(function(){//over
//                $(this).addClass('on');
            },function() {//out
//                $(this).removeClass('on');
            });
        });
    </script>

</head>
<body>
    <div id="wrapper">
        <h1>
           <a href="#">1</a></h1>
        <p>
            1.1
        </p>
        <h1>
            <a href="#">2</a></h1>
        <p>
            2.1
        </p>
        <h1>
            <a href="#">3</a></h1>
        <p>
            3.1
        </p>
        <h1>
            <a href="#">4</a></h1>
        <p>
            4.1
        </p>
        <h1>
            <a href="#">5</a></h1>
        <p>
            5.1
        </p>
    </div>
</body>
</html>
